<template>
    <section style="padding-left: 20px;overflow-y:auto;" :style="{'height': height}">
        <el-row>
            <el-steps :active="ipurchaseImg.length>0 ? 3 : (applyData.length>0 ? 2 : (searchData.length>0 ? 1 : 0))"
                      finish-status="success" simple style="width: 99%">
                <el-step title="第一步：搜索商品" icon="el-icon-search"></el-step>
                <el-step title="第二步：加入申请" icon="el-icon-circle-plus-outline"></el-step>
                <el-step title="第三步：邮寄信息" icon="el-icon-finished"></el-step>
                <el-step title="第四步：发起审批" icon="el-icon-news"></el-step>
            </el-steps>
            <el-row style="width: 99%;background-color: aliceblue;font-size: 12px;padding: 10px 20px;">
                <div style="font-weight: bold">重要提示：</div>
                <p style="color: #ff7171;margin-top: 5px;">内购打款请汇入正确银行账户，具体信息见下方备注！</p>
                <p style="color: #ff7171;" v-if="['kz', 'mz'].includes(user.is_subject)">内购十三余衣服请找联系人：金婷婷，19539032370</p>
                <p style="color: #ff7171;" v-else-if="['yx'].includes(user.is_subject)">内购有香如故衣服请找联系人：吴嫣菲，15695481896</p>
                <p style="color: #ff7171;" v-else-if="['qyx'].includes(user.is_subject)">内购七月夕衣服请找联系人：朱洁瑶，18868738596</p>
                <p style="margin-top: 5px;">备注：</p>
                <div style="padding-left: 18px;">
                    <p>1、试用期员工转正后享受内购福利；</p>
                    <p>2、正式员工享受每月一套的福利，发货优先客户订单；</p>
                    <p>3、内购可换尺码，不可退；</p>
                    <p v-if="user.is_subject == 'kz'">
                        4、十三余收款为&nbsp;&nbsp;
                        <span style="color: #2d8cf0">
                            <span>户名：年年有余 (浙江)文化科技有限公司</span>
                            <span>开户行：杭州联合银行九堡支行</span>
                            <span>账号：201000242198455</span>
                        </span>
                    </p>
                    <p v-if="user.is_subject == 'mz'">
                        4、妙哉收款为&nbsp;&nbsp;
                        <span style="color: #2d8cf0">
                            <span>户名：杭州妙哉文化有限公司</span>
                            <span>开户行：上海浦东发展银行杭州分行营业部</span>
                            <span>账号：95200078801000002375</span>
                        </span>
                    </p>
                    <p v-if="user.is_subject == 'yx'">
                        4、有香如故收款为&nbsp;&nbsp;
                        <span style="color: #2d8cf0">
                            <span>户名：杭州著风和雨文化科技有限公司</span>
                            <span>开户行：中国民生银行杭州庆春支行</span>
                            <span>账号：638836502</span>
                        </span>
                    </p>
                    <p v-if="user.is_subject == 'qyx'">
                        4、七月夕收款为&nbsp;&nbsp;
                        <span style="color: #2d8cf0">
                                <span>户名：杭州汉夕互联网科技有限公司</span>&nbsp;&nbsp;
                                <span>开户行：杭州联合银行九堡支行</span>&nbsp;&nbsp;
                                <span>账号：201000305214608</span>
                            </span>
                    </p>
                </div>
            </el-row>
            <div style="margin-top: 10px;">
                <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">商品信息</span>
            </div>
            <el-row>
                <el-col style="width: 520px;border-top: 1px solid #ebeef5;border-left: 1px solid #ebeef5;border-right: 1px solid #ebeef5;">
                    <el-row style="height: 40px;padding: 6px;background-color: #f5f7fa;">
                        <el-input size="mini" v-model.trim="skuCode" style="width: 300px" placeholder="请输入款号/款名/sku" clearable>
                            <el-button slot="append" icon="el-icon-search" @click="searchSkuBtn"></el-button>
                        </el-input>&nbsp;
                    </el-row>
                    <el-table :data="searchData" :max-height="250" size="small" v-loading="searchLoading"
                              @selection-change="selectedHander">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="img" label="图片" width="50">
                            <template slot-scope="{ row }">
                                <el-image :src="row.img" fit="contain" :preview-src-list="[row.img]">
                                    <div slot="error" class="image-slot">
                                        <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product_name" label="款名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="product_code" label="SKU" width="120"></el-table-column>
                        <el-table-column prop="use_num" label="可销数" width="80"></el-table-column>
                        <el-table-column prop="selling_price" label="售价" width="80"></el-table-column>
                    </el-table>
                </el-col>
                <el-col style="width: 97px;margin: 0 10px;padding-top: 50px;">
                    <el-button type="primary" @click="pushApplyBtn" size="small" :disabled="selectedData.length==0" plain>
                        加入申请<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-col>
                <el-col style="width: 520px;border-top: 1px solid #ebeef5;border-left: 1px solid #ebeef5;border-right: 1px solid #ebeef5;">
                    <el-row style="height: 40px;padding: 10px;background-color: #f5f7fa;">
                        <span style="font-weight: bold;color: #909399">申请列表</span>
                        <div style="display: inline;float: right">
                            总内购数：<span style="font-weight: bold;font-size: 14px;color: #409eff;margin-right: 10px;">{{totalNum}}</span>
                            原价总额：<span style="font-weight: bold;font-size: 14px;margin-right: 10px;">{{totalPrice}}</span>
                            折扣：<span style="font-weight: bold;font-size: 14px;margin-right: 10px;">{{user.discount}}</span>
                            折后总额(元)：<span style="font-weight: bold;font-size: 14px;color: #ed4014;">{{discountAmount}}</span>
                        </div>
                    </el-row>
                    <el-table :data="applyData" :max-height="250" size="small">
                        <el-table-column prop="img" label="图片" width="50">
                            <template slot-scope="{ row }">
                                <el-image :src="row.img" fit="contain" :preview-src-list="[row.img]">
                                    <div slot="error" class="image-slot">
                                        <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product_name" label="款名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="product_code" label="SKU" width="110" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="num" label="单价" align="center" width="120">
                            <template slot-scope="{row}">
                                <el-input size="mini" type="number" v-model.trim="row.price" @input="ipurchaseInput"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="内购数" align="center" width="90">
                            <template slot-scope="{row}">
                                <el-input size="mini" type="number" v-model.trim="row.num" @input="ipurchaseInput"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60">
                            <template slot-scope="scope">
                                <el-button type="text" @click="delApplyBtn(scope.$index)" size="small" class="el-icon-delete" style="color: red;"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24" style="margin-top: 10px;">
                    <div style="margin-bottom: 5px;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">邮寄信息</span>
                    </div>
                    <el-row>
                        <span class="star" style="display: inline-block;width: 80px;">联系人：</span>
                        <el-input v-model.trim="wp_user" placeholder="请输入联系人" style="width: 300px;" size="mini" clearable></el-input>&nbsp;&nbsp;
                        <span class="star" style="display: inline-block;width: 90px;">联系电话：</span>
                        <el-input v-model.trim="wp_phone" placeholder="请输入联系电话" style="width: 300px;" size="mini" clearable></el-input>&nbsp;&nbsp;
                    </el-row>
                    <el-row style="margin-top: 10px;">
                        <span class="star" style="display: inline-block;width: 80px;">邮寄地址：</span>
                        <el-cascader ref="addressRef" filterable size="mini" style="width: 300px" :options="address"
                                     v-model="selected_address" placeholder="请选择省市区" @change="addressChange"></el-cascader>
                        <el-input v-model.trim="wp_address" placeholder="请输入详细地址" style="width: 490px" size="mini" clearable></el-input>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <span class="star" style="display: inline-block;width: 200px;">付款信息：（只允许上传一张图片）</span>
                        <el-upload action="/api/tool/fileImport" list-type="picture-card" style="margin-top: 10px;"
                                   :headers="uploadHeaders"
                                   :data="uploadData"
                                   :file-list="ipurchaseImg"
                                   :on-success="(res, file, fileList)=>uploadSuccessHandle( res, file, fileList)"
                                   :before-upload="beforeUploadHandle">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url"/>
                                <span class="el-upload-list__item-actions">
<!--                                    <span class="el-upload-list__item-preview" @click="previewImgBtn(file)">-->
<!--                                      <i class="el-icon-zoom-in"></i>-->
<!--                                    </span>-->
                                    <span class="el-upload-list__item-delete" @click="delImgBtn(file)">
                                      <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                    </el-row>
                </el-col>
            </el-row>
        </el-row>
        <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
            <el-button @click="closeBtn(0)">退 出</el-button>
            <el-button type="primary" class="el-icon-news" @click="approvalBtn" :loading="saveLoading"
                       :disabled="applyData.length==0 || discountAmount<=0 || ipurchaseImg.length==0 || !wp_user || !wp_phone || !wp_province || !wp_city || !wp_address">
                &nbsp;{{ saveLoading ? '提交中 ...' : '发起审批' }}</el-button>
        </div>

        <!--图片预览-->
        <el-dialog :visible.sync="previewVisible">
            <img width="100%" :src="previewUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>

import {juyiList} from "@/api/oms/juyi";
import {getToken} from "@/libs/util";
import { regionData } from "element-china-area-data";
import {ipurchaseApproval} from "@/api/op/ipurchase";

export default {
    name: "myIpurchase",
    props:{

    },
    data() {
        return {
            height: window.innerHeight - 150+"px",
            user: {},
            nodeActions: [],
            loading: false,
            data: [],
            selectedAllocationData: [],

            step: 0,
            createLoading: false,
            address: [],
            saveLoading: false,
            searchLoading: false,
            searchData: [],
            applyData: [],
            selectedData: [],
            skuCode: "",
            remark: "",
            reason: "",
            wp_user: "",
            wp_phone: "",
            wp_province: "",
            wp_city: "",
            wp_area: "",
            courier_type: "",
            logistics_code: "",
            selected_address: "",
            wp_address: "",
            send_type: "",
            send_date: "",

            ipurchaseImg:[],
            uploadHeaders: {},
            uploadData:{type: 'lend_ipurchase', disk: 'image'},
            previewVisible: false,
            previewUrl: "",

            totalNum: 0,
            totalPrice: 0,
            discountAmount: 0,
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        closeBtn(refreshData){
            this.$emit("close-hander");
            if(refreshData){
                this.$emit("data-hander");
            }
        },
        //搜索申请的sku报次列表
        searchSkuBtn(){
            let obj = {
                page: 1,
                limit: 50,
                type_no: this.skuCode,
            };
            this.selectedData = [];
            this.searchLoading = true;
            juyiList(obj).then((res) =>{
                this.searchLoading = false;
                this.searchData = res.data.data;
            }).catch(()=>{
                this.searchLoading = false;
            })
        },
        selectedHander(list){
            this.selectedData = list;
        },
        pushApplyBtn(){
            let skuCodes = [];
            this.applyData.forEach((item) =>{
                skuCodes.push(item.product_code);
            });
            this.selectedData.forEach((item) =>{
                if(!skuCodes.includes(item.product_code)){
                    this.applyData.push({
                        img: item.img,
                        price: item.selling_price,
                        product_name: item.product_name,
                        product_code: item.product_code,
                        num: 1
                    })
                }
            });
            this.ipurchaseInput();
            this.$message.warning("添加成功，若已添购完成，请继续填写邮件信息")
        },
        delApplyBtn(index){
            this.applyData.splice(index, 1);
            this.ipurchaseInput();
        },
        //省市区
        addressChange(e){
            if (e.length) {
                this.$nextTick(() => {
                    let label = this.$refs.addressRef.getCheckedNodes();
                    let arr = label[0].pathLabels;
                    this.wp_province = arr[0];
                    this.wp_city = arr[1];
                    this.wp_area = arr[2] ? arr[2] : "";
                });
            } else {
                this.wp_province = "";
                this.wp_city = "";
                this.wp_area = "";
            }
        },

        //上传之前的检测
        beforeUploadHandle(file) {
            if(!['image/jpg','image/jpeg','image/png'].includes(file.type)){
                this.$message.error('上传图片只能是 jpg、png 格式!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //上传成功
        uploadSuccessHandle(res, file, fileList) {
            if(res.code === 0){
                this.ipurchaseImg = [ fileList[fileList.length-1] ];
            }else{
                this.$message.error("上传失败");
                fileList = fileList.filter(item => item.response && item.response.code === 0);
                this.ipurchaseImg = fileList;
            }
        },
        //预览
        previewImgBtn(file){
            this.previewUrl = file.url;
            this.previewVisible = true;
        },
        //删除图片
        delImgBtn(file){
            this.ipurchaseImg.splice(0, 1);
        },
        //输入内购数
        ipurchaseInput(){
            this.totalNum = 0;
            this.totalPrice = 0;
            this.applyData.forEach(item =>{
                if(item.num > 0 && item.price > 0){
                    let num = Number(item.num);
                    let price = Number(item.price);
                    this.totalNum += num;
                    this.totalPrice = this.totalPrice + price * num;
                }
            });
            this.totalPrice = this.totalPrice.toFixed(2);
            this.discountAmount = (this.totalPrice * this.user.discount).toFixed(2);
        },

        //发起审批
        approvalBtn(){
            if(this.wp_user == ""){
                this.$message.warning("联系人, 不能为空");return;
            }
            if(this.wp_phone == ""){
                this.$message.warning("联系电话, 不能为空");return;
            }
            if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.wp_phone)) {
                this.$message.warning("手机号码有误，请重填");return;
            }
            if(this.wp_address == "" ||  this.wp_province == "" || this.wp_city==""){
                this.$message.warning("邮寄地址, 不能为空");return;
            }
            if(this.ipurchaseImg.length == 0){
                this.$message.warning("请上传付款截图");return;
            }
            let obj = {
                wp_user: this.wp_user,
                wp_phone: this.wp_phone,
                wp_province: this.wp_province,
                wp_city: this.wp_city,
                wp_area: this.wp_area,
                wp_address: this.wp_address,
                img: this.ipurchaseImg[0].response.data,
                detail: []
            };
            this.applyData.forEach(item =>{
                obj.detail.push({sku_code: item.product_code, num: item.num, price: item.price});
            });
            this.$confirm("确定发起审批?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.saveLoading = true;
                ipurchaseApproval(obj).then((res) =>{
                    this.saveLoading = false;
                    if(res.code === 0){
                        this.$message.success(res.msg);
                        this.wp_user = "";
                        this.wp_phone = "";
                        this.wp_province = "";
                        this.wp_city = "";
                        this.wp_area = "";
                        this.wp_address = "";
                        this.applyData = [];
                        this.searchData = [];
                        this.selectedData = [];
                        this.ipurchaseImg = [];
                        this.closeBtn(1);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(() =>{
                    this.saveLoading = false;
                })
            }).catch(() => {});
        },
    },
    mounted() {
        this.address = JSON.parse(JSON.stringify(regionData));
        //6.0版本以上  没有香港、澳门，需手动添加下
        this.address.push({label:"香港特别行政区", value:"66",
            children:[
                {label:"中西區", value:"6601"},
                {label:"灣仔區", value:"6602"},
                {label:"東區", value:"6603"},
                {label:"南區", value:"6604"},
                {label:"油尖旺區", value:"6605"},
                {label:"深水埗區", value:"6606"},
                {label:"九龍城區", value:"6607"},
                {label:"黃大仙區", value:"6608"},
                {label:"觀塘區", value:"6609"},
                {label:"荃灣區", value:"6610"},
                {label:"屯門區", value:"6611"},
                {label:"元朗區", value:"6612"},
                {label:"北區", value:"6613"},
                {label:"大埔區", value:"6614"},
                {label:"西貢區", value:"6615"},
                {label:"沙田區", value:"6616"},
                {label:"葵青區", value:"6617"},
                {label:"離島區", value:"6618"}
            ]
        });
        this.address.push({label:"澳门特别行政区", value:"67",
            children:[
                {label:"花地瑪堂區", value:"6701"}
            ]
        });
    }
}
</script>

<style scoped>
.star::before {
    content: "* ";
    color: #F56C6C;
}
.demo-table-expand /deep/ label {
    width: 80px;
    color: #99a9bf;
    font-size: 12px;
}
.demo-table-expand /deep/ div {
    font-size: 12px;
    color: #99a9bf;
}
/deep/ .el-form-item--mini.el-form-item{
    margin-bottom: 0;
}
/deep/ .el-steps--simple{
    padding: 6px 8%;
}
/deep/ .el-step.is-simple .el-step__title{
    font-size: 14px;
}
</style>
